<template>
	<view class="main animated fadeIn faster">
		<!-- <TitleBarVue :title="title"/> -->
		<view class="content position-fixed z-index-99" :style="{'paddingTop':$store.state.statusBarHeight+'px','top':'0'}">
			<view class="title">
				<view class="pl-2 mr-4" @click="goBack"><text class="iconfont icon-31fanhui1 font30 mr-5"></text></view>
				<text class="" :style="{marginRight: IsShow? '0' : '120rpx'}">{{title}}</text>
				<view v-if="IsShow" @click="next" class="mr-2" style="width: 120rpx;" :style="[{color: nextColor}]">下一步</view>
			</view>
		</view>
		<view class="d-flex" style="width: 2250rpx; transition: transform 0.3s ease;" :style="[{transform: 'translateX('+DicX+'rpx)'}]">
			<view style="width: 750rpx;">
				<view class="mt-100 d-flex-btn" style="width: 100%; background-color: fff;">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E6%89%8B%E6%9C%BA%E7%BB%91%E5%AE%9A.png" mode="widthFix" style="width: 500rpx;"></image>
				</view>
				<view class="d-flex-column d-flex-middle position-absolute" style="top: 500rpx; width: 750rpx;">
					<view class="" style="color: #272727;">当前绑定手机号为：+86{{Phone}}</view>
					<view class="btn" @click="ChangePhone">更换手机号</view>
				</view>
			</view>
			<view style="width: 750rpx;">
				<view class="d-flex-column d-flex-middle pb-10" style="width: 100%; margin-top: 180rpx;">
					<view class="font32" style="color: #272727;">当前绑定手机号为：+86{{Phone}}</view>
					<view class="mt-2" style="color: #a09ea1;">如需更换手机号，请验证原手机号码</view>
				</view>
				<view class="ml-2 font26" style="color: #121212;">{{RemindText}}</view>
				<view class="ml-2 font32 mb-4" style="color: #040404;">{{Phone}}</view>
				<view class="d-flex d-flex-middle d-flex-between" style="border-bottom: 1px solid #a0d7cf; width: 700rpx; margin: 0 auto;">
					<input type="number" v-model="code" @input="oninput" maxlength="6" placeholder="请输入验证码"style="height: 85rpx;"/>
					<view @click="sendCode(1)" :style="{color: SendBtnColor}">{{SendBtnText}}</view>
				</view>
				<view class="btn" style="margin-top: 50rpx;" @click="NextStep">下一步</view>
			</view>
			<view style="width: 750rpx;">
				<view class="font40 font-bold pl-4 pt-3" style="margin-top: 180rpx;">更换手机号</view>
				<view class="ml-4 mt-1 mb-3">{{newTitle}}</view>
				<view class="d-flex d-flex-middle d-flex-between mb-2" style="border-bottom: 1px solid #a0d7cf; width: 670rpx; margin: 0 auto;">
					<input type="number" v-model="changePhone" @input="oninput" maxlength="11" placeholder="请输入新的手机号码" style="height: 85rpx;" /></view>
				<view class="d-flex d-flex-middle d-flex-between mb-2" style="border-bottom: 1px solid #a0d7cf; width: 670rpx; margin: 0 auto;">
					<input type="number" v-model="code" @input="oninput" maxlength="6" placeholder="请输入验证码"style="height: 85rpx;"/>
					<view @click="sendCode2" :style="{color: SendBtnColor}">{{SendBtnText2}}</view>
				</view>
				<view class="btn" style="margin-top: 50rpx;" @click="config">确认修改</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import TitleBarVue from '../../components/TitleBar.vue';
	import { userApi } from '../../http/userApi';
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				newTitle:'请输入新的手机号码：',
				title: '手机绑定',
				DicX: 0,
				code: '',
				changePhone:'',//修改后的手机号
				timer: null,
				timer2: null,
				SendBtnColor: '#121212',
				SendBtnText: '发送验证码',
				SendBtnText2: '发送验证码',
				RemindText: '通过以下手机号获取验证码信息',
				totalTime: 60,
				totalTime2: 60,
				sendParams:{
					phone: this.$store.state.user.phone,
					actionCode: 'user_valid_code'
				},
				check:false,//是否可以修改手机号
				checkParams:{
					phone: this.$store.state.user.phone,
					code: this.code,
					actionCode: 'real_name_valid_code'
				}
			}
		},
		// components: {TitleBarVue},
	
		methods: {
			async editPhone(){
				let param={
					phone:this.changePhone
				}
				let res=await userApi.editUserInfo(param);
				this.$store.state.user.phone=this.changePhone;
				
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			async CheckCode(){
			
				let res = await userApi.CheckCode(this.checkParams)
				console.log(!res);
				
				if(!res){
					if(this.checkParams.phone===this.$store.state.user.phone){
						this.code=''
						this.title = ''
						this.DicX = -1500
						
					}else{
						console.log('修改');
						this.$store.state.user.phone=this.changePhone;
						this.editPhone();
						uni.showToast({
							title:'修改手机号成功',
							icon:'none',
						})
						uni.navigateBack({
							delta: 1
						});
					}
					
				}else{
					
					uni.showToast({
						title:'验证码错误',
						icon:'none',
					})
					
					
				}
				
			},
			
			ChangePhone() {
				this.DicX = -750
				this.title = '更换手机号'
			},
			async sendCode(i){
				let that = this
				if(that.totalTime == 60){
					try{
						uni.showLoading({
							title:'发送中'
						})
						
						let res = await userApi.SpecificSendCode(this.sendParams)
						uni.hideLoading()
						if(i==1){
							that.startTimer();
						}else{
							that.startTimer2();
						}
						
					}catch(e){
						uni.hideLoading()
					}
				}
			},
			config(){
				if(this.code){
					this.checkParams.phone=this.changePhone
					this.checkParams.code=this.code
					this.CheckCode()
				}
			},
			sendCode2(){
				if(!this.check){
					
				
				const regex = /^1[3-9]\d{9}$/;
				if(regex.test(this.changePhone)){
					this.newTitle='请输入验证码：'
					this.sendParams.phone=this.changePhone
					 this.sendCode(2);
				}else{
					uni.showToast({
						title:'手机号格式不正确',
						icon:'none',
					})
					
				}
				}else{
					
				}
			},
			startTimer() {
				if (this.timer) return;
				this.totalTime--;
				this.SendBtnText = `发送验证码(${this.totalTime})`;
				this.SendBtnColor = '#a6a6a6'
				this.timer = setInterval(() => {
				    if (this.totalTime <= 0) {
				        clearInterval(this.timer);
				        this.timer = null;
				        this.SendBtnText = '发送验证码';
						this.totalTime = 60
						this.SendBtnColor = '#121212'
				    } else {
				        this.totalTime--;
				        this.SendBtnText = `发送验证码(${this.totalTime})`;
						this.SendBtnColor = '#a6a6a6'
				    }
				}, 1000);
				
			},
			startTimer2() {
				if (this.timer2) return;
				this.totalTime2--;
				this.SendBtnText2 = `发送验证码(${this.totalTime})`;
				this.SendBtnColor = '#a6a6a6'
				this.timer = setInterval(() => {
				    if (this.totalTime2 <= 0) {
				        clearInterval(this.timer2);
				        this.timer = null;
				        this.SendBtnText2 = '发送验证码';
						this.totalTime2 = 60
						this.SendBtnColor = '#121212'
				    } else {
				        this.totalTime2--;
				        this.SendBtnText2 = `发送验证码(${this.totalTime2})`;
						this.SendBtnColor = '#a6a6a6'
				    }
				}, 1000);
				
			},
			NextStep() {
				this.CheckCode()
				// this.title = ''
				// this.DicX = -1500
			}
		},
		computed: {
			Phone() {
				let phone = this.$store.state.user.phone
				return phone.substr(0, 3) + "****" + phone.substr(7)
			}
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #fff;
	min-height: 100vh;
	overflow: hidden;
	.content .title {
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
		padding-right: 47rpx;
		text {
			flex: 1;
			font-size: 32rpx;
			text-align: center;
			font-weight: normal;
		}
	}
	.z-index-99 {
		z-index: 99;
	}
	.btn {
		background: #cff0fb;
		border-radius: 50rpx;
		border: 1px solid #46C4FF;
		color: #46C4FF;
		text-align: center;
		height: 80rpx;
		width: 80%;
		margin: 30rpx auto 0;
		line-height: 80rpx;
	}
}
</style>
